<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>Browse</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="qrc:///web/css/jquery.mobile-1.4.5.min.css" />
    <script src="qrc:///web/js/jquery-1.11.1.min.js"></script>
    <script src="qrc:///web/browse/main.js"></script>
    <script src="qrc:///web/js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/browse/main.css" />

    <script src="qrc:///web/js/color-thief.min.js"></script>
    <link rel="stylesheet" href="qrc:///web/scroll.css" />
    <script src="qrc:///web/js/common.js"></script>
</head>
<!-- oncontextmenu="return false;" -->
<body  onselectstart="return false;" ondragstart="return false;" ondrop="return false;">

    <img style="display:none;" src="" id="coverImage" />
    <div class="ui-loader-background"> </div>

    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle='false'>
        <div  data-role="tabs" id="tabs">
            <div data-role="navbar">
              <ul>
                <li><a onclick="$.mobile.changePage($('#overview_page'));" id="overview" >OVERVIEW</a></li>
                <li><a onclick="open_new_release();" id="new_releases" >NEW RELEASES</a></li>
                <li><a onclick="open_categories();" id="genres" >GENRES & MOODS</a></li>
              </ul>
            </div>
         </div> <!--tabs-->
    </div><!-- /header -->

    <div id="overview_page" data-role="page" data-theme="b" data-title="OVERVIEW">
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

        </div>
    </div>

    <div id="new_releases_page" data-role="page" data-theme="b" data-title="NEW RELEASES">
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

            <ul class="list" id="albums_result" data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
                <!--load data here-->
            </ul>
        </div>
        <!-- page footer-->
        <div  id="footer_new_releases" style='display:none; background-color: rgba(29, 29, 29, 0.64);' data-role='footer' data-position='fixed' data-tap-toggle='false'>
            <a id='prevBtn' class='ui-btn ui-mini ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all' style='width:40%;float:left;background-color: rgba(36, 142, 179, 0.66);border: none;'>Previous</a>
            <a  id='nextBtn' class='ui-btn ui-mini ui-icon-arrow-r ui-btn-icon-right ui-shadow ui-corner-all' style='width:40%;float:right;background-color: rgba(36, 142, 179, 0.66);border: none;'>Next</a>
        </div>
    </div>

    <div id="album_view_page" data-role="page" data-theme="b" data-title="ALBUMS VIEW">
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

            <!--load data here-->
        </div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <a onclick="back_to_release_page()" style="display: block;background-color: rgba(36, 142, 179, 0.5)"  class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all" data-transition="slidefade" >Back to new releases</a>
        </div><!-- /footer -->
    </div>

    <div id="categories_page" data-role="page" data-theme="b" data-title="GENRES & MOODS">
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

            <ul class="list" id="categories_result" data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
                <!--load data here-->
            </ul>
        </div>
        <!-- page footer-->
        <div  id="footer_categories" style='display:none; background-color: rgba(29, 29, 29, 0.64);' data-role='footer' data-position='fixed' data-tap-toggle='false'>
            <a id='prevBtn' class='ui-btn ui-mini ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all' style='float:left;background-color: rgba(36, 142, 179, 0.66);border: none;'>Previous</a>
            <a id='nextBtn' class='ui-btn ui-mini ui-icon-arrow-r ui-btn-icon-right ui-shadow ui-corner-all' style='float:right;background-color: rgba(36, 142, 179, 0.66);border: none;'>Next</a>
        </div>
    </div>

    <div id="category_playlist_page" data-role="page" data-theme="b" >
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

            <ul class="list" id="playlist_result" data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
                <!--load data here-->
            </ul>
        </div>
        <!-- page footer-->
        <div  id="footer_playlists" style='display:none; background-color: rgba(29, 29, 29, 0.64);' data-role='footer' data-position='fixed' data-tap-toggle='false'>
            <a id='prevBtn' class='ui-btn ui-mini ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all' style='float:left;background-color: rgba(36, 142, 179, 0.66);border: none;'>Previous</a>
            <a id='nextBtn' class='ui-btn ui-mini ui-icon-arrow-r ui-btn-icon-right ui-shadow ui-corner-all' style='float:right;background-color: rgba(36, 142, 179, 0.66);border: none;'>Next</a>
            <a onclick="back_to_categories_page()" style="display: block;background-color: rgba(36, 142, 179, 0.5)"  class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all" data-transition="slidefade" >Back to genres</a>
        </div>
    </div>

    <div id="playlist_view_page" data-role="page" data-theme="b" >
        <div role="main" class="ui-content">
        <div id="pageloader" class="ui-bar ui-bar-b ui-loader-overview" style="display:none;margin-top: 25px;text-align: center;margin-left:6px !important;"><i>Loading content please wait...</i></div>

            <ul class="list" id="playlist_tracks_result" data-role="listview" data-split-icon="bars" data-split-theme="b" data-inset="true">
                <!--load data here-->
            </ul>
        </div>
        <!-- page footer-->
        <div  id="footer_playlist_view" style='display:none; background-color: rgba(29, 29, 29, 0.64);' data-role='footer' data-position='fixed' data-tap-toggle='false'>
            <a id='prevBtn' class='ui-btn ui-mini ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all' style='float:left;background-color: rgba(36, 142, 179, 0.66);border: none;'>Previous</a>
            <a id='nextBtn' class='ui-btn ui-mini ui-icon-arrow-r ui-btn-icon-right ui-shadow ui-corner-all' style='float:right;background-color: rgba(36, 142, 179, 0.66);border: none;'>Next</a>
            <a onclick="back_to_playlists_page()" style="display: block;background-color: rgba(36, 142, 179, 0.5)"  class="ui-mini ui-btn ui-icon-back ui-btn-icon-left ui-corner-all" data-transition="slidefade">Back to playlists</a>
        </div>
    </div>

</body>
</html>
